<template>
  <div class="list-container">
    <Card
      v-show="isContent"
      :style="{ height: '100%' }"
      dis-hover
      :bordered="false"
      ref="container"
    >
      <Row type="flex">
        <!--查询表单-->
        <Col span="24" ref="form">
          <slot name="form"></slot>
        </Col>
        <!--工具栏目-->
        <Col span="24" ref="tools">
          <slot name="tools"></slot>
        </Col>
        <!--表格列表-->
        <Col span="24" ref="tables">
          <slot name="table"> </slot>
        </Col>
        <!---分页-->
        <Col span="24" ref="pages">
          <slot name="pages"> </slot>
        </Col>
      </Row>
    </Card>
    <slot></slot>
  </div>
</template>
<script>
import { Debounce } from "@u/common.js";
export default {
  props: {
    isContent: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  mounted() {
    const func = Debounce(() => {
      this.$nextTick(() => {
        //let containerHeight = this.$refs.container.$el.offsetHeight - 32;
        let formHeight = this.$refs.form.$el.offsetHeight;
        let toolsHeight = this.$refs.tools.$el.offsetHeight;
        let pagesHeight = this.$refs.pages.$el.offsetHeight;

        let tableHeight =
          window.innerHeight -
          50 -
          37 -
          52 -
          formHeight -
          toolsHeight -
          pagesHeight;
        this.$emit("resize", tableHeight);
      });
    });
    window.onresize = () => {
      func();
    };
    func();
  }
};
</script>
<style scoped>
.list-container {
  padding: 10px;
  height: 100%;
}
</style>
